<template>
    <div>
        <tool-bar nav="" title='Yaml合并'></tool-bar>
        <el-row :gutter="20" class="grid">
            <el-col :span="10">
                共： {{ txt1_lines.length }} 行
                <el-input type="textarea" v-model="$data.txt1"></el-input>
            </el-col>
            <el-col :span="2" class="op_column">
                <el-button @click="eval_click">合并</el-button>
            </el-col>

            <el-col :span="10">
                共： {{ txt3_lines.length }} 行
                <el-input type="textarea" v-model="$data.txt3"></el-input>
            </el-col>
        </el-row>
    </div>
</template>
<style lang="scss" scoped>

.grid {
    position: relative;
    margin-left: 20px !important;
    margin-top: 20px !important;

    display: flex;

    ::v-deep(textarea), ::v-deep(.el-col), ::v-deep(.el-textarea) {
        min-height: 60vh !important;
        height: 70vh;
    }
}

.op_column {
    padding-top: 150px;
    padding-bottom: 150px;
    display: flex;
    flex-wrap: wrap;
    place-content: center;
    align-content: space-around;
    position: relative;


    button {
        display: block;
        margin: 5px 2px;
    }

    .el-button + .el-button {
        margin-left: 0;
    }
}

</style>
<script setup>
/**
 * Created by CodeGenerator
 */



defineOptions({
    name: "vue2-3",
    inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({"txt1": "", "txt3": ""});

const txt2 = `

`

const $props = defineProps({});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);

const txt1_lines = $computed(function () {
    return $data.txt1.split("\n").filter(it => it).map(it => it.trim());
});

const txt3_lines = $computed(function () {
    return $data.txt3.split("\n").filter(it => it).map(it => it.trim());
});

const eval_click = function () {
    jv.$saveData({"txt1": $data.txt1});

    jv.$http.post("/dev/tools/yaml-join",$data.txt1).then(res=>{
      $data.txt3 = res.data.data;
    });

};

onMounted(function () {
    jv.$loadData("txt", v => $data.txt1 = v);
})


</script>
